<template>
  <div>
    <el-form
      class="clearfix search-form"
      :model="formModel"
      :size="size"
    >
      <el-form-item
        v-for="(item, index) in formList"
        :key="index"
        :label="item.label || ''"
      >
        <template>
          <template v-if="item.type === 'input'">
            <el-input
              v-model="formModel[item.prop]"
              :type="item.inputType || 'text'"
              :placeholder="item.placeholder || '请输入'"
            ></el-input>
          </template>
          <template v-else-if="item.type === 'select'">
            <el-select
              v-model="formModel[item.prop]"
              :placeholder="item.placeholder || '请选择'"
            >
              <el-option
                v-for="i in item.options"
                :key="i[item.value] || i.value"
                :label="i[item.key] || i.label"
                :value="i[item.value] || i.value"
                :disabled="i.disabled"
              >
              </el-option>
            </el-select>
          </template>
        </template>
      </el-form-item>
      <el-form-item>
        <template
          name="form-slot"
          slot-scope="scope"
        >
          <slot :scope="scope">
          </slot>
        </template>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: 'search-form',
  props: {
    formModel: {
      type: Object,
      default: () => { }
    },
    size: {
      type: String,
      default: 'small'
    },
    formList: {
      type: Array,
      default: () => []
    }
  }
}
</script>
<style lang="scss">
.search-form {
  padding: 20px 20px 0;

  .el-form-item {
    float: left;
    width: 50%;
    max-width: 420px;
    margin-right: 18px;
  }

  .el-form-item__content {
    width: 100%;
  }
}
</style>